<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Js</title>
    <style>
        #out{
            width: 800px;
            height: 40px;
            border: 1px solid #333;
        }
        #in{
            width: 0%;
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <h3>10S倒计时</h3>
    <hr>
        <h1>进度条</h1>
        <div id="out">
            <div id="in"></div>
        </div>


    <script>
        //获取div
        var div = document.getElementById('in');
        //设置定时函数
        var timer = setInterval(run,100);

        var m = 0;
        function run(){
            //判断定时结束
            if (m >= 100) {
                clearInterval(timer);
                return;
            }
            m++;
            div.style.width = m+'%';
        }
    </script>
</body>
</html>